<template>
  <div class="container">
      <van-field v-model="phone" required label="手机号" placeholder="请输入手机号"/>

    <van-field v-model="image" center clearable label="图片验证码" placeholder="请输入图片验证码">
      <template #button>
        <van-image width="100" height="35" :src="imageurl" @click="getImage"/>
      </template>
    </van-field>

    <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
      <template #button>
        <van-button type="primary" :disabled="disabled" @click="submit">{{ msgs }}</van-button>
      </template>
    </van-field>
    <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit" @click="register">登录</van-button>
      <br>
    <van-button round block type="info" native-type="submit" @click="Sina">新浪微博</van-button>
  </div>
  </div>
</template>

<script>
import {v4 as uuid} from 'uuid'
export default {
  name: "Login",
  data(){
    return{
      phone: '',
      sms: '',
      uuid1: '',
      imageurl: '',
      image: '',
      disabled: false,
      msgs: '发送验证码',
      time: 60,
    }
  },
  methods:{
    getImage(){
      this.uuid1 = uuid()
      this.imageurl = "http://localhost:8000/vant/picture?uuid=" + this.uuid1
    },
    submit(){
      var s = setInterval(()=>{
        if(this.time == 0){
          clearInterval(s)
          this.msgs = '发生验证码'
          this.disabled = false
          this.time = 60
        } else {
          this.time--;
          this.msgs = this.time
          this.disabled = true
        }
      },1000)
      this.axios.post("http://localhost:8000/vant/sms", {phone: this.phone, uuid: this.uuid1, image: this.image}).then(res => {
        if(res.data.code == 200){
          alert(res.data.msg)
        } else {
          alert(res.data.msg)
        }
      })
    },
    register(){
      this.axios.post("http://localhost:8000/vant/register", {phone: this.phone, sms: this.sms}).then(res =>{
        if(res.data.code == 200){
          alert(res.data.msg)
          localStorage.setItem('userid', res.data.userid)
          localStorage.setItem('token', res.data.token)
          this.$router.push('/')
        } else {
          alert(res.data.msg)
        }
      })
    },
    Sina(){
      this.axios.get("http://localhost:8000/vant/sina").then(res =>{
        window.location.href = res.data.url;
      })
    }
  },
  mounted() {
    this.getImage()
  }
}
</script>

<style scoped>
.tupian{
}



</style>